<template>

    <el-table
        ref="table"
        v-click-outside.capture="onClickOutside"
        v-click-outside:mousedown.capture="onClickOutside"
        v-click-outside:touchstart.capture="onClickOutside"
        :data="list"
        :row-class-name="tableRowClassName"
        @row-click="handleRowClick"
        highlight-current-row
        :max-height="maxHeight"
        class="normal-el-table"
        border
        @selection-change="handleGoodsSelectionChange"
    >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column
            prop="goodsIndex"
            label="项号"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="contrItem"
            label="备案序号"
            width="120"
        ></el-table-column>
        <el-table-column prop="codeTs" label="商品编号" width="150">
            <template slot-scope="scope">
                <span :title="scope.row.codeTs">
                    {{ scope.row.codeTs }}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="ciqName"
            label="检验检疫名称"
            width="160"
        ></el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称"
        ></el-table-column>
        <el-table-column prop="goodsModel" label="规格" width="300">
            <template slot-scope="scope">
                <span :title="scope.row.goodsModel" class="break">
                    {{ scope.row.goodsModel }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="gqty" label="成交数量"></el-table-column>
        <el-table-column prop="gunitCHN" label="成交单位"></el-table-column>
        <el-table-column prop="declPrice" label="单价"></el-table-column>
        <el-table-column prop="declTotal" label="总价"></el-table-column>
        <el-table-column prop="tradeCurrCHN" label="币制"></el-table-column>
        <el-table-column
            prop="originCountryCHN"
            width="130"
            label="原产国(地区)"
        ></el-table-column>
        <el-table-column
            prop="destinationCountryCHN"
            width="120"
            label="最终目的国"
        ></el-table-column>
        <el-table-column
            prop="dutyModeCHN"
            label="征免方式"
        ></el-table-column>
    </el-table>
</template>
<script>
import { directive as clickOutside } from 'v-click-outside-x'
import { on, off } from '@/libs/tools'

export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
        maxHeight: {
            type: [Number, String]
        }
    },
    methods: {
        handleRowClick (row, column, event) {
            this._index = row.index
            this.$emit('row-click', row, column, event)
            this.bindKeyup()
        },
        tableRowClassName ({ row, rowIndex }) {
            row.index = rowIndex
        },
        handleGoodsSelectionChange (list) {
            this.$emit('selection-change', list)
        },
        // 绑定键盘上下切换事件
        bindKeyup () {
            if (!this._isBound) {
                this._isBound = 1
                on(document, 'keyup', this.hanldeKeyup)
            }
        },
        // 处理键盘上下切换
        hanldeKeyup (e) {
            const keyCode = e.keyCode
            if (keyCode === 38 || keyCode === 40) {
                const isUp = keyCode === 40
                this.$nextTick(() => {
                    if (typeof this._index === 'number' && this.$refs.table) {
                        const len = this.list.length
                        const table = this.$refs.table.$el
                        const scrollDom = table.querySelector('.el-table__body-wrapper')
                        let index = this._index + (isUp ? 1 : -1)
                        if (index < 0) {
                            index = len - 1
                        } else if (index >= len) {
                            index = 0
                        }
                        const targetRow = (scrollDom && scrollDom.querySelectorAll('.el-table__row') || [])[index]
                        if (!targetRow) return
                        // 设置滚动条滚动
                        scrollDom.scrollTop = targetRow.offsetTop
                        const row = this.list[index]
                        this.$refs.table.setCurrentRow(row)
                        this.handleRowClick(row, null, e)
                    }
                })
            }
        },
        // table以外的点击无效
        onClickOutside () {
            if (this._isBound) {
                this._isBound = 0
                off(document, 'keyup', this.hanldeKeyup)
            }
        }
    },
    directives: {
        clickOutside
    },
    beforeDestroy () {
        off(document, 'keyup', this.hanldeKeyup)
    }
}
</script>
